<template>
  <div id="login-page" class="login-container">
    <div>
      <h1>登录 TIChat</h1>
    </div>
    <el-form
        :model="loginForm"
        :rules="loginRules"
        label-position="top"
        label-width="150px"
        hide-required-asterisk
        ref="loginFormRef"
        class="login-form"
    >
      <el-form-item class="register-link-container">
        <router-link to="/register" class="register-link">还没有账号？点击注册</router-link>
      </el-form-item>

      <el-form-item label="用户名" prop="userEmail">
        <el-input
            v-model="loginForm.userEmail"
            placeholder="请输入邮箱地址"
            :prefix-icon="User"
            class="input-field"
        />
      </el-form-item>

      <el-form-item label="密码" prop="userPassword">
        <el-input
            v-model="loginForm.userPassword"
            placeholder="请输入密码"
            show-password
            :prefix-icon="Lock"
            class="input-field"
        />
      </el-form-item>

      <el-form-item class="action-buttons">
        <el-button type="primary" @click="login" class="login-button">登录</el-button>
      </el-form-item>
      <el-form-item class="action-buttons">
        <router-link to="forget-password" class="forgot-password-link">忘记密码？</router-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import { axiosInstance } from "@/axios";
import {ElMessage} from "element-plus";
import { useRoute,useRouter} from 'vue-router';
const route=useRoute();
const router = useRouter();


const loginForm = reactive({
  userEmail: '',
  userPassword: ''
});
onMounted(() => {

  if (route.query.userEmail) {
    loginForm.userEmail = route.query.userEmail as string;
  }
});

const loginRules = {
  userEmail: [
    { required: true, message: "请输入邮箱地址", trigger: "blur" },
    {
      type: "email",
      message: "请输入正确的邮箱地址",
      trigger: ["blur", "change"]
    }
  ],
  userPassword: [
    { required: true, message: "请输入密码", trigger: "blur" },
  ]
};

const loginFormRef = ref();

const login = () => {
  loginFormRef.value.validate((valid: boolean) => {
    if (valid) {
      axiosInstance.post('/user/login', loginForm)
          .then(response => {
            var data=response.data;
            if (data.code==100000){
              ElMessage({
                message: data.message,
                type: 'success',
              })
              const token = data.data.token;
              localStorage.setItem("token",token);
              router.push("/");
            }
            else {
              ElMessage({
                message: data.message,
                type: 'error',
              })
            }
          })
          .catch(error => {
           ElMessage({
             message: error,
             type: 'error'
           })
          });
    } else {
      return false;
    }
  });
};
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 20px;
  text-align: center;
  background-color: #f0f2f5; /* 设置背景为灰色 */
}

.login-form {
  width: 450px; /* 表单宽度 */
  max-width: 90%;
  padding: 30px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.input-field {
  width: 100%;
  height: 55px;
}

.el-input__inner {
  height: 55px;
  border-radius: 25px;
}

.register-link-container {
  text-align: center;
  margin-bottom: 20px;
}

.register-link {
  font-size: 14px;
  color: #05a0c9;
}

.action-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-button {
  width: 200px;
  height: 45px;
  font-size: 18px;
  margin-top: 20px;
}

.forgot-password-link {
  margin-top: 15px; /* 增加顶部间距 */
  font-size: 14px;
  color: #05a0c9;
}
</style>
